<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>俄罗斯方块 - 经典益智游戏</title>
    <link href="remote_files/fonts.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/png" href="assets/favicon.png">
</head>
<body>
    <div class="container">
        <header>
            <h1>俄罗斯方块</h1>
            <div class="score-container">
                <div class="score-box">
                    <span class="score-label">得分</span>
                    <span id="score">0</span>
                </div>
                <div class="score-box">
                    <span class="score-label">等级</span>
                    <span id="level">1</span>
                </div>
                <div class="score-box">
                    <span class="score-label">行数</span>
                    <span id="lines">0</span>
                </div>
            </div>
        </header>

        <div class="game-area">
            <div class="game-info">
                <div class="next-block">
                    <h3>下一个</h3>
                    <canvas id="next-block-canvas"></canvas>
                </div>
                <div class="controls-info">
                    <h3>控制说明</h3>
                    <ul>
                        <li>← → : 移动</li>
                        <li>↑ : 旋转</li>
                        <li>↓ : 快速降落</li>
                        <li>空格键 : 直接到底</li>
                        <li>P : 暂停</li>
                    </ul>
                </div>
                <div class="mobile-controls">
                    <h3>移动端控制</h3>
                    <ul>
                        <li>左/右滑动 : 移动</li>
                        <li>点击 : 旋转</li>
                        <li>向下滑动 : 快速降落</li>
                        <li>双击 : 直接到底</li>
                    </ul>
                </div>
            </div>
            <canvas id="game-canvas"></canvas>
        </div>

        <div class="buttons">
            <button id="start-button" class="btn">开始游戏</button>
            <button id="pause-button" class="btn" disabled>暂停</button>
            <button id="reset-button" class="btn">重置</button>
        </div>

        <div id="game-over" class="modal hidden">
            <div class="modal-content">
                <h2>游戏结束！</h2>
                <p>最终得分: <span id="final-score">0</span></p>
                <p>消除行数: <span id="final-lines">0</span></p>
                <p>最高等级: <span id="final-level">1</span></p>
                <button id="play-again" class="btn">再玩一次</button>
            </div>
        </div>

        <div id="level-up" class="modal hidden">
            <div class="modal-content">
                <h2>升级了！</h2>
                <p>你已达到等级 <span id="new-level">2</span>!</p>
                <button id="continue" class="btn">继续</button>
            </div>
        </div>

        <div id="pause-screen" class="modal hidden">
            <div class="modal-content">
                <h2>游戏暂停</h2>
                <button id="resume" class="btn">恢复</button>
            </div>
        </div>
    </div>

    <footer>
        <p>欢迎点击 ❤️ | <a href="https://github.com/musthofa-kamaluddin/Tetris" target="_blank">原项目GitHub</a>
        | <a href="https://github.com/Firfr/tetris-3_zh" target="_blank">汉化镜像制作仓库</a>
        </p>
    </footer>

    <script src="js/game.js"></script>
</body>
</html>